<template>
    <div class="icons-wrap">
        <swiper :options="swiperOption">
            <swiper-slide class="icons-slide" v-for="(item,index) in page" :key="index">
                <div class="icons-item" v-for="(icon,index) in item" :key="icon.id">
                    <img :src="icon.src" alt="" class="icon">
                    <p class="txt">{{icon.txt}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {},
      icons: [
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 1
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          txt: "热门景点",
          id: 2
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
          txt: "热门景点",
          id: 3
        },
        {
          src:
            "https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/91a810441506568937171df66f754375.png",
          txt: "热门景点",
          id: 4
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 5
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 6
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 7
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 8
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 9
        },
        {
          src:
            "https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
          txt: "热门景点",
          id: 10
        }
      ]
    };
  },
  computed: {
    page() {
      let pages = [];
      this.icons.forEach((item, index) => {
        let idx = Math.floor(index / 8);
        if (!pages[idx]) {
          pages[idx] = [];
        }
        pages[idx].push(item);
      });
      return pages;
    }
  }
};
</script>

<style scoped>
.icons-wrap {
  background: white;
  padding-top:10px;
}
.icons-slide{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.icons-item {
  width: 25%;
  margin-bottom: 10px;
  /* border:1px solid red; */
}
.icons-item .icon {
  display: block;
  width: 70%;
  margin: 0 auto;
}
.icons-item .txt {
  font-size: 0.3rem;
  text-align: center;
}
</style>
